// import { useState } from "react";
import { useImmer } from "use-immer";

type Artwork = {
	id: number;
	title: string;
	seen: boolean;
};
const initialList : Artwork[] = [
	{ id: 0, title: 'Big Bellies', seen: false },
	{ id: 1, title: 'Lunar Landscape', seen: false },
	{ id: 2, title: 'Terracotta Army', seen: true },
];

const BucketList = () => {
	// const [list, setList] = useState(initialList);
	// const handleToggle = (artworkId : number ,  nextSeen : boolean) => {
	// 	setList(
	// 		list.map(artwork => {
	// 			if (artwork.id === artworkId) {
	// 				return { ...artwork, seen: nextSeen };
	// 			} else {
	// 				return artwork;
	// 			}
	// 		})
	// 	);
	// }

	const [list, updateList] = useImmer(initialList);
	const handleToggle = (artworkId : number ,  nextSeen : boolean) => {
		updateList(draft => {
			const artwork = draft.find(artwork => artwork.id === artworkId);
			if (artwork) {
				artwork.seen = nextSeen;
			}
		});
	}

	return (
		<>
			<h1>Art Bucket List</h1>
			<h2>my list of art to see:</h2>
			<ItemList data={list} onToggle={handleToggle}></ItemList>
		</>
	);
}

const ItemList = ({data, onToggle} : {data: Artwork[], onToggle: Function}) => {
	return (
		<ul>
			{data.map(item => (
				<li key={item.id}>
					<label>
						<input type="checkbox" checked={item.seen} onChange={e => onToggle(item.id, e.target.checked)} />
						{item.title}
					</label>
				</li>

			))}
		</ul>
	);
}

export default BucketList;